<template>
    <view style="height: 100%">
		<template v-if="marketingSwitch">
			<!-- 新成长会员卡片暂时隐藏 -->
			<view class="grade" v-if="false">
			    <view class="grades" @tap="naviVipYxhk">
			        <view class="grade-in flex-row-start">
			            <view class="progress">
			                <view class="grade-in_top flex-row-between">
			                    <view class="top flex-row-start">
			                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/v0.png" class="grade_icon"></image>
			                        <view>{{ marketingAllMemberInfo.userGrowthLevelName || '--' }}</view>
			                    </view>
			                    <view v-if="marketingAllMemberInfo.distanceNextLevelName">{{ marketingAllMemberInfo.distanceNextLevelName }}</view>
			                </view>
			                <view class="uni-padding-wrap uni-common-mt">
			                    <view class="progress-box">
			                        <view class="rewrite--progress">
			                            <image
			                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/doc_bg.png"
			                                :style="'left: calc(' + marketingAllMemberInfo.progress + '% - 20rpx)'"
			                                class="doc_wrap"
			                            ></image>
			                            <view class="progress_bg" :style="'width: ' + marketingAllMemberInfo.progress + '%;'"></view>
			                        </view>
			                        <!-- <progress percent="{{account}}" active stroke-width="8" border-radius="9" backgroundColor="#DDE3E8" activeColor="#FFB153" /> -->
			                        <p>
			                            距离下一级还差
			                            <text>{{ marketingAllMemberInfo.differenceIntegral || 0 }}</text>
			                            积分
			                        </p>
			                    </view>
			                </view>
			            </view>
			            <!-- <view class="integral_box" @tap.stop.prevent="naviIntegralYxhk">
			                <view class="integral flex-row-center">{{ marketingAllMemberInfo.integral || 0 }}</view>
			                <view class="flex-row-center">
			                    <text class="title">积分</text>
			                    <image class="icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/turn-1.png"></image>
			                </view>
			            </view> -->
			        </view>
			    </view>
			</view>
			
		</template>
		<template v-else>
        <!-- 旧版成长会员卡片 -->
        <view class="grade" v-if="false">
            <view class="grades" @tap="naviVip">
                <view class="grade-in flex-row-start">
                    <view class="progress">
                        <view class="grade-in_top flex-row-between">
                            <view class="top flex-row-start">
                                <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/v0.png" class="grade_icon"></image>
                                <view>{{ personage.levelName }}</view>
                            </view>
                            <view v-if="personage.levelNextName">{{ personage.levelNextName }}</view>
                        </view>
                        <view class="uni-padding-wrap uni-common-mt">
                            <view class="progress-box">
                                <view class="rewrite--progress">
                                    <image
                                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/doc_bg.png"
                                        :style="'left: calc(' + personage.account + '% - 20rpx)'"
                                        class="doc_wrap"
                                    ></image>
                                    <view class="progress_bg" :style="'width: ' + personage.account + '%;'"></view>
                                </view>
                                <!-- <progress percent="{{account}}" active stroke-width="8" border-radius="9" backgroundColor="#DDE3E8" activeColor="#FFB153" /> -->
                                <p>
                                    距离下一级还差
                                    <text>{{ personage.gap || 0 }}</text>
                                    积分
                                </p>
                            </view>
                        </view>
                    </view>
                    <view class="integral_box" @tap.stop.prevent="naviIntegral">
                        <view class="integral flex-row-center">{{ personage.consumeIntegral }}</view>
                        <view class="flex-row-center">
                            <text class="title">积分</text>
                            <image class="icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/turn-1.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		</template>
	</view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// pages/my/components/growMemberCard/index.ts
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        marketingAllMemberInfo: {
            type: Object,
            default: () => ({})
        },
        personage: {
            type: Object,
            default: () => ({})
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //跳转到会员
        naviVip() {
            getApp().globalData.CHECK_LOGIN(() => {
                uni.navigateTo({
                    url: '/mine/pages/vip/vip'
                });
            });
        },
        //跳转到积分列表
        naviIntegral() {
            getApp().globalData.CHECK_LOGIN(() => {
                uni.navigateTo({
                    url: '/echartsPages/pages/integral/integral'
                });
            });
        },
        //跳转到会员
        naviVipYxhk() {
            getApp().globalData.CHECK_LOGIN(() => {
                uni.navigateTo({
                    url: '/mine/pages/vipYxhk/vipYxhk'
                });
            });
        },
        //跳转到积分列表
        naviIntegralYxhk() {
            getApp().globalData.CHECK_LOGIN(() => {
                uni.navigateTo({
                    url: '../../mine/pages/integralYxhk/integralYxhk'
                });
            });
        }
    },
    created: function () {}
}
</script>
<style lang="less" scoped>
@import '../../commin/flex.less';
// @import "@/commin/flex.less";
// @import "../../../commin/commin.less";
// @import '../../commin/commin.less';
.rewrite--progress {
    width: 100%;
    height: 16rpx;
    position: relative;
    border-radius: 8rpx;
    background: #dde3e8;

    .doc_wrap {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 26rpx;
        height: 26rpx;
        background: rgba(231, 191, 137, 0.5);
        border-radius: 50%;
        transition: left 0.5s;
    }

    .progress_bg {
        width: 0;
        background: linear-gradient(90deg, #f7d2b2, #ff9e47);
        height: 100%;
        border-radius: 8rpx;
        transition: width 0.5s;
    }

    .doc {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background: #ffffff;
    }
}
.grade {
    position: relative;
    // @gao (136rpx);
	height: 136rpx;

    .grade-bg {
        // @kuangao (@percent, 136rpx);
		width: 100%;
		height: 136rpx;
    }

    .grades {
        /* .grids(20%; 80%);*/

        // @position (absolute, 0, 0, 0, 0);
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
        .grade-in {
            margin-left: 20%;

            .progress {
                // @kuan (427rpx);
				width: 427rpx;
                margin-right: 32rpx;

                .grade-in_top {
                    // @fontsize (25rpx);
					font-size: 25rpx;
                    color: #937C5C;
                }

                .grade_icon {
                    width: 44rpx;
                    height: 48rpx;
                    margin-right: 8rpx;
                }

                .progress-box {
                    p {
                        // @fontsize (22rpx);
						font-size: 22rpx;
                        color: #606266;
						margin: 10rpx 0 0 0;

                        text {
                            color: #FC724C !important;
                            // @paddings (0prx; 10rpx; 0rpx; 10rpx);
							padding: 0 10rpx;
							padding: 0 10rpx;
                           font-size: 24rpx;
                        }
                    }
                }
            }

            .integral_box {
                width: 120rpx;
                background: rgba(20, 135, 250, 0);
                border: 5rpx solid #d2dde8;
                border-radius: 18rpx;
                box-sizing: border-box;
                padding: 4rpx 0;

                .integral {
                    font-size: 34rpx;
                    font-family: DINPro;
                    font-weight: 500;
                    color: #b8794e;
                }

                .title {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #937c5c;
                    margin-right: 7rpx;
                }

                .icon {
                    width: 12rpx;
                    height: 19rpx;
                }
            }
        }
    }
}
</style>
